<template>
  <div :style="backgroundDiv" class="mybody">
<!--    <audio preload id="media"  :src="pronounce" controls="controls" hidden ></audio>-->
<!--    <audio preload id="media2"  :src="pronounce" controls="controls" hidden ></audio>-->
          <ul>
            <li v-for="(word,index) in words"  class="myul">
              <div class="content">
              <span class="myleft">{{word.name}}</span>
                <input type="button" value="PASS" style="width:50px;height:25px;border:2px #ffeecc dashed;float: right" v-on:click="removeword(word.id)"></input><br><br>
                <div class="myleft">
                  英式 &nbsp;&nbsp;<img v-on:click="bfus(word.name)" src="../assets/volume-up-line.png" alt="">&nbsp;&nbsp;
                  美式&nbsp;&nbsp;<img v-on:click="bfuk(word.name)" src="../assets/volume-up-line.png" alt="">
                </div><br><br>
              <span class="myleft">{{word.translate}}</span>
              <br>
              </div>
            </li>
          </ul>
    <div v-show="words.length<1">
      <div class="myprompt">开始您的学习之旅吧</div>

    </div>
  </div>

</template>

<script>
  import qs from 'qs'
  import store from "../store/store";
    export default {
      name: "Main",

      data () {
        return {
          words: [],
          pronounce:"https://dict.youdao.com/speech?audio=hello",
          count: 0,
          page: 1,
          num:null,
          backgroundDiv: {
            backgroundImage:'url(' + require('../assets/pic01.png') + ')',
            backgroundRepeat:'no-repeat',
            backgroundSize:'100% 100%',
            with:'100px',
            height:'610px'
          },
        }
      },
      methods: {
        go() {
          this.$router.go(-1);//返回上一层
        },
        show:function () {
          var params = new URLSearchParams()
          params.append('uid', store.state.id)
          this.$axios.post('/selectmyword',
            params
          )
            .then(res => {
              // 逆向输出，将后来的展示到最前面
              this.words = res.data.data.reverse()
            })
        },
        removeword:function (id) {
          this.words.some((item, i)=>{
            if(item.id==id){
              this.words.splice(i, 1)
              //在数组的some方法中，如果return true，就会立即终止这个数组的后续循环
              return true
            }
          })
          var params = new URLSearchParams()
          params.append('id', id)
          this.$axios.post('/deleteword',
            params
          )
            .then(res => {
            })
        },
        bfus(word) {
          (function (argument) {
            // 音频文件
            var src = "https://dict.youdao.com/speech?audio="+word+"&type=1";
            // 初始化Aduio
            var audio = new Audio();

            var playPromise;

            audio.src = src;

            playPromise = audio.play();

            if (playPromise) {
              playPromise.then(() => {
                // 音频加载成功
                // 音频的播放需要耗时
                setTimeout(() => {
                  // 后续操作
                  console.log("done.");
                }, audio.duration * 1000); // audio.duration 为音频的时长单位为秒


              }).catch((e) => {
                // 音频加载失败
              });
            }
          })();
        },
        bfuk(word){
          (function (argument) {
            // 音频文件
            var src = "https://dict.youdao.com/speech?audio="+word+"&type=2";
            // 初始化Aduio
            var audio = new Audio();
            var playPromise;
            audio.src = src;
            playPromise = audio.play();
            if (playPromise) {
              playPromise.then(() => {
                // 音频加载成功
                // 音频的播放需要耗时
                setTimeout(() => {
                  // 后续操作
                }, audio.duration * 1000); // audio.duration 为音频的时长单位为秒
              }).catch((e) => {
                // 音频加载失败
              });
            }
          })();
        },
        handleAddRandom(id,name,translate) {
          // 将添加的词展示加到数组前面
          this.words.unshift({'id':id,'name':name,'translate':translate})
        }
      },
      created() {
        this.show()
      },
      mounted() {
        this.$bus.on('addword',this.handleAddRandom);
      }
    }
</script>

<style scoped>

.mainDiv{
  display: flex;
  flex-direction: column;
  height: 100% ;
}
.content {
  height: 100px;
  margin-top: 5px;
  /*background-color: #f5f1ea;*/
  background-color: rgba(255,255,255,0.1);
  flex:1;
}

.myul{
  /* 去掉 li 前面默认的点  */
  list-style-type:none;
  border-bottom:1px solid #ffeecc;
  padding-bottom: 7px;
  padding-top: 7px;
}
/* 去掉 ul 默认的缩进和空格 */
ul {
  margin:0px;
  padding-left: 7px;
  padding-right: 7px;
}
  .tou{
    background-color: rgba(255,255,255,0.5);
  }
  .myleft{
    float: left;
    margin-left: 10px;
  }
  .mybody{
    border:1px solid #a09e9d;position:fixed;top:0px;float:inherit;width:100%;
    left: 0px;
  }
  .myprompt{
    margin-top: 20px;
    font-size: 20px;
  }
</style>
